<style scoped xmlns:text-decoration="http://www.w3.org/1999/xhtml" >
.contents{background-color: #fafafa;padding-top: 20px;}
.contents::after{content: "";display: block;clear: both;}
.container{width: 1280px;margin: 0 auto;padding-bottom: 20px;}
.container::after{content: "";display: block;clear: both;}
.left-container{width: 216px;background-color: #fff;float: left;min-height: 800px;border: 1px solid #ddd;border-radius: 2px;}
.right-container{width: 1050px;background-color: #fff;float: right;min-height: 800px;border: 1px solid #ddd;border-radius: 2px;}
.left-header{background-color: #0557ae;text-align: center;color: #fff;height: 40px;line-height: 40px;border-bottom: 2px solid #f59723;border-top-left-radius: 2px;border-top-right-radius: 2px;}
.left-container ul{margin: 0 10px;}
.left-container ul li{padding:10px;}
/* -- */
/* 新增或修改的 CSS 样式 */
/* 新增或修改的 CSS 样式 */
.policy-content {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 0.25rem;
}

.titlename {
  text-align: center;
  margin-bottom: 1rem;
  color: #333;
  font-size: 2rem;
  font-weight: bold;
}

.pdiv {
  background-color: white;
  border-radius: 0.25rem;
  padding: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 670px;
}

.policy-text {
  /* 保持现有样式 */
  text-align: center;
  margin-bottom: 1rem;
}

.policy-sections {
  margin-top: 1rem;
}

.policy-section {
  margin-bottom: 2rem;
}

.policy-section h4 {
  margin-bottom: 1rem;
  color: #333;
  font-size: 1.5rem;
  font-weight: bold;
}

.policy-section p {
  color: #666;
  font-size: 1rem;
  line-height: 1.5;
}
/* -- 样式 服务列表item*/
.service-item { display: block; padding: 10px; text-decoration: none; color: #0A7BBB; transition: color 0.2s ease-in-out; }
</style>


<template>
  <div>
    <div class="contents">
      <div class="container clearfix">
        <div class="left-container">
          <div class="left-header">
            服务列表
          </div>
          <ul style="list-style-type: none; text-decoration: none; text-align: left; ">
            <li><a class="service-item" @click="confirmToTranfer()">企业职工养老保险关系转移申请</a></li>
            <li><a class="service-item" @click="toPages('guide')">办事指南</a>

            </li>
          </ul>
        </div>
        <div class="right-container" style="margin:10px, 20%"><!--10px, 20% -->
          <!--引入开始-->
          <div class="policy-content" >
            <!--   子组件              -->
            <router-view />
          </div>
        </div>
      </div>
    </div>

    <el-dialog
        v-model="dialogVisible"
        title="注意"
        width="500"
        :before-close="handleClose"
    >
      <span>当前业务需要登录办理，请先登录，再进行办理！</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref,onMounted } from 'vue'
import { ElMessageBox,ElNotification} from 'element-plus'
import {toTransfer} from "@/common/commonFunc.ts";

const dialogVisible = ref(false)

const handleClose = (done) => {
  dialogVisible.value = false
}
const router = useRouter();
const toPages = (str) => {
  // 保证跳转参数的安全性
  if(['search', 'transfer', 'guide'].includes(str)) {
    router.push(`/index/infoPagesTransfer/${str}`)
  } else {
    console.warn('Invalid page request:', str);
  }
}

// 跳转转移
const confirmToTranfer = () => {
  ElMessageBox.confirm(
    '您确定要申请企业职工养老保险关系转移吗？',
    '确认提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      showClose: false,
      closeOnClickModal: false,
      closeOnPressEscape: false
    }
  )
    .then(() => {
      toTransfer('1', router)
    })
    .catch(() => {
      // 用户点击取消按钮时不显示额外提示
      return
    })
}

// 挂载时自动跳转
onMounted(() => {
  toPages('guide')

})
</script>
